<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="card search">
					<view>
						<view class="wd-search-box">
							<wd-search v-model="formData.title" placeholder-left placeholder="请输入标题" cancel-txt="搜索"
								@clear="doSearch" @cancel="doSearch" @search="doSearch" @blur="doSearch" />
						</view>
						<view class="advanced-search">
							<!-- '/lawsRegulations/advanced/advanced' -->
							<wd-button type="success" @click="goPage('/tools/lawsRegulations/advanced/advanced')"
								custom-class="wd-button-custom-class-my-success wd-button-custom-class-w100 square">高级检索</wd-button>
						</view>
					</view>
					<view class="lien"></view>
					<view>
						<view class="type">
							<wd-radio-group checked-color="#C91C1F" v-model="typeValue" inline shape="dot">
								<wd-radio disabled checked-color="#C91C1F" :value="1">精确搜索</wd-radio>
								<wd-radio disabled checked-color="#C91C1F" :value="2">模糊搜索</wd-radio>
							</wd-radio-group>
						</view>
						<view class="text">
							为您找到 {{ count }} 条相关结果
						</view>
					</view>
				</view>
				<view class="card list">
					<view class="item" v-for="(item,index) in dataList"
						@click="goPage('/tools/lawsRegulations/info/info',{id:item.id})">
						<view class="title text-ellipsis">
							{{ item.title }}
						</view>
						<view class="desc text-ellipsis">
							{{ item.wenzi_number }}
						</view>
						<view class="date  text-ellipsis">
							{{ item.pub_date }}颁布{{ item.imp_date }}实行
						</view>
					</view>
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';
	import useDataLoad from "@/hooks/useDataLoad"
	import useRouter from "@/hooks/useRouter"
	import { getLawList } from "@/api/index";
	import { onLoad } from '@dcloudio/uni-app';
	export default defineComponent({
		name: '',
		components: {},
		setup(props, ctx) {
			const router = useRouter();
			// 日间light、夜间dark主题
			const theme = ref('light');
			const typeValue = ref(2);
			const formData = ref({
				title: "",
			})
			const dataLoad = useDataLoad(getLawList);
			const search = () => {
				dataLoad.setParams(formData.value);
				dataLoad.reGetData()
			}
			const doSearch = () => {
				typeValue.value = 2;
				formData.value = {
					title: formData.value.title,
				}
			}
			const goPage = (url : any, params : any) => {
				if (!url) {
					uni.$wdToast.error("暂未开放")
					return;
				}
				router.push({
					url,
					params,
					events: {
						advancedSearch: (data : any) => {
							console.log(data, '111');
							let pub_date = data.pub_date.map((item : any) => getDate(item)).join("-");
							let imp_date = data.imp_date.map((item : any) => getDate(item)).join("-");;

							formData.value = {
								...data,
								cate_id: data.cate_id[data.cate_id.length - 1],
								pub_date: pub_date,
								imp_date: imp_date,
							};
							typeValue.value = 1;
							search();
							router.back({
								delta: 1,
							});
						}, // 高级检索事件
					},
				})
			}
			const getDate = (str : any) => {
				let date = new Date(str),
					year = date.getFullYear(),
					month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1),
					day = date.getDate()
				return `${year}/${month}/${day}`
			}
			onLoad(() => {
				dataLoad.getData();
				console.log(dataLoad);
			})
			return {
				theme,
				typeValue,
				formData,
				search,
				goPage,
				doSearch,
				...dataLoad,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		padding: 24rpx;

		position: relative;

		.search {
			width: calc(100% - 24rpx - 24rpx - 24rpx - 24rpx);
			padding: 24rpx;
			position: absolute;
			top: 24rpx;
			left: 24rpx;

			>view {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.wd-search-box {
				flex: 0 0 calc(100% - 100rpx - 24rpx - 24rpx - 24rpx);

				:deep(.wd-search) {
					padding: 0;

					:deep(.wd-search__block) {
						background: #F2F2F2;
						border-radius: 14rpx 0rpx 0rpx 14rpx !important;

						.wd-search__field {
							height: 80rpx;
						}
					}

					:deep(.wd-search__cancel) {
						height: 80rpx;
						line-height: 80rpx;
						background: #C91C1F;
						border-radius: 0rpx 14rpx 14rpx 0rpx;
						font-family: PingFang;
						font-weight: 400;
						font-size: 27rpx;
						color: #FFFFFF;
					}
				}
			}

			.advanced-search {
				flex: 0 0 150rpx;

				>:deep(.wd-button) {
					height: 80rpx;
					line-height: 80rpx;
					width: 100%;
					padding: 0;
					max-width: 100%;
					min-width: auto;
				}
			}

			.lien {
				width: 100%;
				height: 1rpx;
				background: #EEEEEE;
				margin-top: 24rpx;
			}

			.type {
				margin-top: 24rpx;

				:deep(.wd-radio.is-dot.is-checked .wd-radio__shape) {
					background-color: #C91C1F;
					border-color: #C91C1F;
				}
			}

			.text {
				margin-top: 24rpx;
				font-family: PingFang;
				font-weight: 500;
				font-size: 21rpx;
				color: #999999;
			}
		}

		.list {
			margin-top: 260rpx;
			min-height: 200rpx;

			.item {
				padding: 24rpx;
				border-bottom: 1rpx solid #EEE;

				.title {
					font-family: PingFang;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					padding-bottom: 12rpx;
				}

				.desc,
				.date {
					margin-top: 12rpx;
					font-family: PingFang;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

	}
</style>